<template>
  <el-dialog
    v-dialogDrag
    ref="cancelDialog"
    :close-on-click-modal="false"
    :visible.sync="openCancel"
    :before-close="cancelClose"
    title="订单取消"
    width="70%"
  >
    <el-form ref="cancelForm" :rules="rules" :model="cancelForm" size="mini" label-width="90px">
      <el-row :gutter="6">
        <el-col :xs="24" :sm="8" :md="24">
          <el-form-item prop="reason" label="取消理由">
            <el-input v-model="cancelForm.reason" placeholder="请输入取消理由" type="textarea" clearable required/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align:center;">
      <el-button type="text">
        <i class="el-icon-search magnifier" />
      </el-button>
      <el-button type="primary" @click="confirmCancel">确 认</el-button>
      <el-button @click="cancelClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { confirmCancel } from '@/api/commodity/orderManage/orderMaintenance.js'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'

export default {
  name: 'CANCELORDER',
  components: {
    BaseTable
  },
  mixins: [formMixins],
  props: {
    openCancel: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rules: {
        reason: [{ trigger: 'blur', required: true, message: '请输入取消理由' }]
      },
      cancelForm: {
        reason: '',
        orderId: ''
      }
    }
  },
  mounted() {
  },
  methods: {

    // 确认取消
    confirmCancel() {
      this.$refs['cancelForm'].validate(valid => {
        if (valid) {
          this.cancelForm.orderId = this.orderId
          confirmCancel(this.cancelForm).then(res => {
            this.$message({
              type: 'success',
              message: '取消成功!'
            })
            this.cancelClose()
          }).catch(err => {})
        }
      })
    },

    cancelClose() {
      this.orderId = ''
      this.cancelForm = {
        reason: '',
        orderId: ''
      }
      this.$emit('cancelClose')
    }

  }
}
</script>

<style scoped>
</style>
